
<template>
  <div class="login">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">校园点餐管理平台</span>
      </div>
      <el-form
        :model="loginUser"
        :rules="rules"
        ref="loginForm"
        class="loginForm"
        label-width="80px"
      >
        <el-form-item label="电话号码" prop="phoneNumber">
          <el-input v-model="loginUser.phoneNumber" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item 
         label="验证码"
         style="width: 100%"
         prop="verificationCode">
          <el-input
           type="text"
           v-model="loginUser.verificationCode" 
           style="width: 50%"
           placeholder="验证码"
          ></el-input>
          <!-- 倒计时按钮 -->
         <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
          
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登 录</el-button>
        </el-form-item>
        <div class="tiparea">
          <i class="regisetr">
            还没有账号？现在
            <router-link to="/register">注册</router-link>
          </i>
        </div>
      </el-form>
    </section>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
import axios from "axios";
import qs from "qs";
export default{
  name:"forgetPass",
  data() {
     return {
        loginUser: {
            phoneNumber: '',
            verificationCode: '',
        },
        codeBtnWord: '获取验证码', // 获取验证码按钮文字
        waitTime:61, // 获取验证码按钮失效时间
        rules: {
        phoneNumber: [
          {
            required: true,
            message: "电话号码不能为空",
            trigger: "blur"
          },
          // 正则匹配式
          {
            validator: function(rule, value, callback) {
              if (
              /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
      }
    }
},
computed: {
    // 用于校验手机号码格式是否正确
    phoneNumberStyle(){
        let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/
        if(!reg.test(this.loginUser.phoneNumber)){
            return false
        }
        return true
    },
    // 控制获取验证码按钮是否可点击
    getCodeBtnDisable:{
        get(){
            if(this.waitTime == 61){
                if(this.loginUser.phoneNumber){
                    return false
                }
                return true
            }
            return true
        },
        // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
        set(){} 
    }
},
methods:{
  getCode(){
    if(this.phoneNumberStyle){
        let params = {}
        params.phoneNumber = this.loginUser.phoneNumber
        // reqno
         params.reqNo="string"
        // 调用获取短信验证码接口
        axios.post('https://miitangs09.market.alicloudapi.com/v1/tools/sms/code/sender/appId:LTAI5tLiJynjN7PSUo1k5Vy6/appKey:U8JMFexHq0ISzqm8F4zjbAt4FPpsWj',params).then(res=>{
            res = res.data
            if(res.status==200) {
                this.$message({
                    message: '验证码已发送，请稍候...',
                    type: 'success',
                    center:true
                })
            }
        }).catch(error=>{
       this.$message({
       message:error,
       type:'error',
       center:true
      })
           console.log(error,"失败了")
           })
        // 因为下面用到了定时器，需要保存this指向
        let that = this
        that.waitTime--
        that.getCodeBtnDisable = true
        this.codeBtnWord = `${this.waitTime}s 后重新获取`
        let timer = setInterval(function(){
            if(that.waitTime>1){
                that.waitTime--
                that.codeBtnWord = `${that.waitTime}s 后重新获取`
            }else{
                clearInterval(timer)
                that.codeBtnWord = '获取验证码'
                that.getCodeBtnDisable = false
                that.waitTime = 61
            }
        },1000)
    }
}
}
}

</script>


<style scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.form_container {
  width: 450px;
  height: 300px;
  background-color: rgba(255,255,255,.6);
  position: absolute;
   left:50%;
    top:50%;
    transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #000;
}
.loginForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
.tiparea {
  font-size: 12px;
  color: #333;
}
.tiparea .regisetr a {
 margin-right:70px;
  color: #409eff;
}
.tiparea .forgetPass a {
      color:#409eff;
}
.code {
  width: 120px;
  float:left;
}
.login-code {
  cursor: pointer;
}
.el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
}
.el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
}
</style>


